import React, { Component,PropTypes} from 'react';
import {Link} from 'react-router';
import CommonBtn from '../CommonComponent/CommonBtn'
import Top from '../CommonComponent/Top'
import '../../Stylesheets/wx/recharge.css'
import UUID from 'uuid-js'
import {RechargeApply,MyInfo,ProductPropertyCheck,JudgeUp,SaveRechargeOrder} from '../../Action/auth';
import {GetQueryString} from '../../Action/rpc';
import DelayModal from '../../Component/CommonComponent/DelayModal'

export default class RechargeFirst extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.click=true;
        this.state = {
            valueGroups: {
                title: '请选择申请等级'
            },
            optionGroups: {
                title: ['请选择申请等级', '执行官方']
            },
            showState:{
                display:'none'
            },
            payImg:require("../../Images/uploadImg.png"),
            status:false,
            amount:0,
            imgadd:'',
            useAmount:0,
            total:0,
            lack:0,
            modalDelay:false
        };
        this.grade=''
    }

    async componentWillMount(){
        /* var recommendId = GetQueryString('recommendId')
         await this.setState({
         recommendId:recommendId
         })*/
        // const token = await loadToken()
        var total = GetQueryString('total')
        this.grade = GetQueryString('grade')
        this.setState({total:total})
        await MyInfo()
            .then(res=>{
                sessionStorage.setItem('myAgent',res.AGENT_GRADE);
                console.log(res.USE_AMOUNT)
                this.setState({
                    useAmount:res.USE_AMOUNT,
                    lack: total - res.USE_AMOUNT
                })
            })
            .catch(err=>{
                console.warn('获取资料失败',err)
            })
    }

    static contextTypes = {
        router:PropTypes.object
    }

    submit = () =>{
        if(this.click){
            this.click=false;
            const {total,useAmount,lack} = this.state;
            if(GetQueryString('judgeup')!=='0'){
                if(total>useAmount){
                    alert('货款不足，还需充值'+(total-useAmount))
                    /*this.context.router.push({pathname:'/toPay',
                        query:{tranType:2,orderNos:lack,total:total,payMuchMoney:lack,grade:this.grade}
                    })*/
                    SaveRechargeOrder(total,2)
                        .then(res=>{
                            this.context.router.push({pathname:'/uploadImg',query:{type:4,orderNos:res,payMuchMoney:total,grade:this.grade}})
                        })
                        .catch(err=>{
                            console.warn('获取资料失败',err)
                        })
                    this.click=true;
                }else{
                    this.setState({modalDelay:true})
                    ProductPropertyCheck(this.grade)
                        .then(res=>{
                            alert('货款充足，首次进货需进最低'+ parseFloat(total)*0.9 +'元的货物');
                            this.context.router.push({pathname:'/purchase'})
                            this.setState({modalDelay:false})
                            this.click=true;
                        })
                        .catch(err=>{
                            alert(err.message)
                            this.setState({modalDelay:false})
                            console.warn('升级失败',err);
                            this.click=true;
                        })
                }
            }else{
                JudgeUp(this.grade)
                    .then(res=>{
                        if(res=='2'){
                            alert('您的等级高于当前等级，无需升级');
                            this.context.router.push({pathname:'/personalCenter'})
                        }else if(res=='1'){
                            alert('货款不足，还需充值'+(total-useAmount));
                            /*this.context.router.push({pathname:'/toPay',
                                query:{tranType:2,orderNos:lack,total:total,payMuchMoney:lack,grade:this.grade,judgeup:0}
                            })*/
                            SaveRechargeOrder(total,2)
                                .then(res=>{
                                    this.context.router.push({pathname:'/uploadImg',query:{type:4,orderNos:res,payMuchMoney:total,grade:this.grade}})
                                })
                                .catch(err=>{
                                    console.warn('获取资料失败',err)
                                })
                        }else{
                            /*alert('升级成功');
                            this.context.router.push({pathname:'/personalCenter',query:{type:4}})*/
                             SaveRechargeOrder(total,2)
                                .then(res=>{
                                    this.context.router.push({pathname:'/uploadImg',query:{type:4,orderNos:res,payMuchMoney:total,grade:this.grade}})
                                })
                                .catch(err=>{
                                    console.warn('获取资料失败',err)
                                })
                        }
                    })
                    .catch(err=>{
                        alert(err.message)
                        this.setState({modalDelay:false})
                        console.warn('升级失败',err);
                        this.click=true;
                    })
            }

        }

    }


    render(){
        const {total,useAmount}=this.state;
        return(
            <div>
                <Top
                    title ={'代理充值'}
                />
                <div className="containerNav" style={{top:50,bottom:0}}>
                    <div className="border_bottom f14 userHeight pl">
                        <span className="" >品牌:</span>
                        <span className="margin15">维魅力</span>
                    </div>
                    <div className="border_bottom f14 userHeight pl">
                        <span className="" >成为代理需充值:</span>
                        <span className="margin15">￥{total}</span>
                    </div>
                    <div className="border_bottom f14 userHeight pl">
                        <span className="" >我的货款:</span>
                        <span className="margin15">￥{useAmount}</span>
                    </div>
                    <div style={{marginTop:'3rem'}}>
                        <div>
                            <div className="flex">
                                <div className="flex-1">
                                    <CommonBtn title ={'提交'}
                                               style={{marginBottom:'0.5rem',fontSize:14}}
                                               onClick={()=>this.submit()}
                                    />
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                {
                    this.state.modalDelay?
                        <DelayModal />
                        :null

                }
            </div>
        )
    }

}